<template>
	<div class="TopNav">
		<div class="logo">
			<div class="logo-img">
				<img src="../assets/logo.png" alt srcset />
			</div>
			<div class="logo-zi">后台管理系统</div>
		</div>
		<div class="header-right">
			<el-dropdown class="tui" @command="handleCommand">
				<span style="color: rgb(255, 255, 255);">
					{{userReadName}}
					<i class="el-icon-arrow-down el-icon--right"></i>
				</span>
				<el-dropdown-menu slot="dropdown">
					<el-dropdown-item command="geren">个人信息</el-dropdown-item>
					<el-dropdown-item command="pwd">修改密码</el-dropdown-item>
					<el-dropdown-item command="tuichu">退出登录</el-dropdown-item>
				</el-dropdown-menu>
			</el-dropdown>
			<div class="rightimg">
				<el-avatar v-if="imgurl" size="small" :src="imgurl"></el-avatar>
				<el-avatar v-else size="small" icon="el-icon-user-solid"></el-avatar>
			</div>
			<!-- <div class="tui">
				<el-button @click="out">退出</el-button>
			</div>-->
		</div>
	</div>
</template>
<style lang="stylus" scoped>
.TopNav {
	overflow: hidden;
	background: #23262E;
	color: rgba(255, 255, 255, 0.7);
	height: 60px;
}

.logo {
	float: left;
	text-align: center;
	height: 100%;
	// line-height :60px;
}

.logo-img {
	float: left;
	padding: 15px 11px;
}

.logo-zi {
	float: left;
	line-height: 60px;
}

.logo-img img {
	height: 30px;
}

.header-right {
	float: right;
}

.tui {
	float: right;
	line-height: 60px;
	margin-right: 10px;
}

.rightimg {
	float: right;
	padding: 16px 0;
	width: 28px;
	height: 28px;
	margin-right: 10px;
}
</style>

<script>
import Store from '../Vuex/store'
import {mapGetters} from 'vuex'
export default {
	name: 'TopNav',
	data() {
		return {
			userReadName:'',
			imgurl:''
		}
	},
	created(){
		this.getdata()
	},
	methods: {
		handleSelect(key, keyPath) {
			console.log(key, keyPath)
		},
		//退出登录
		out() {
			Store.commit('exitLogin')
			this.$router.push('/login')
		},
		//个人信息
		geren() {
			this.$router.push('/own')
		},
		//修改密码
		pwd() {
			this.$router.push('/password')
		},
		handleCommand(command) {
			if (command == 'tuichu') {
				this.out()
			}else if(command=='geren'){
                this.geren()
            }else if(command=='pwd'){
                this.pwd()
            }else{
                this.$router.push('/login')
            }
		},
		getdata(){
			this.$get('/api/User/GetUser_dq')
				.then(res => {
					this.userReadName = res.data.realName
					this.imgurl = this.baseurl + res.data.headUrl
				})
				.catch(err => {
					console.log(err)
				})
		}
	},
	computed:{
		...mapGetters(['baseurl'])
	}
}
</script>